<template>
  <Drawer
    v-model:visible="visible"
    class="custom-class"
    title="云服务器规格配置"
    width="50%"
    :destroyOnClose="true"
    placement="right"
  >
    <BasicForm @register="registerForm"></BasicForm>

    <div class="absolute bottom-10 right-8">
      <Button style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</Button>
      <Button type="primary" style="font-weight: bolder" @click="onSubmit">确定</Button>
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
import { Button, Drawer } from 'ant-design-vue';
import BasicForm from '../../../../components/BasicForm/BasicForm.vue';
import { ref } from 'vue';
import { useBasicForm } from '/@/components/BasicForm/hooks/useBasicForm';
import { getEcsSpecificationInfo, updateEcsSpecificationInfo } from '/@/api/system-mgmt/instance-mgmt/instance';
import { ecsForm } from '/@/views/system-mgmt/instance-mgmt/commponent/data';
import { useMessage } from '/@/hooks/web/useMessage';

const message = useMessage();
const visible = ref(false);
const tempAppId = ref();
const tempId = ref();
const emit = defineEmits(['success']);

const [registerForm, { validate, setFieldsValue }] = useBasicForm({
  labelWidth: 100,
  schemas: ecsForm,
  showActionButtonGroup: false,
});

const onClose = () => {
  visible.value = false;
};

const onSubmit = async () => {
  let param = await validate();
  param.appId = tempAppId.value;
  param.packageId = tempId.value;
  const res = await updateEcsSpecificationInfo(param);
  if (res === '1') {
    message.createMessage.success('云服务规格配置成功');
  } else {
    message.createMessage.error('配置失败');
  }
  emit('success');
  onClose();
};

const openDrawer = async (id: string, appId: string) => {
  visible.value = true;
  tempAppId.value = appId;
  tempId.value = id;
  let dataSource = await getEcsSpecificationInfo({ packageId: id, appId: appId });
  setFieldsValue(dataSource);
};

defineExpose({ openDrawer, onSubmit });
</script>
